<script setup lang="ts">
import {getIndexEcharts} from "@/api/interface/reuqest";
import {ref} from "vue";

let total = ref('')
let totalDuration = ref('')
let totalVisit = ref('')
let duration = ref('')
let number = ref('')
let visit = ref('')
getIndexEcharts().then((item) => {
    // console.log(item)
    if (item.code === 200) {
        total.value = item.data.total
        totalDuration.value = item.data.totalDuration
        totalVisit.value = item.data.totalVisit
        duration.value = item.data.duration
        number.value = item.data.number
        visit.value = item.data.visit
    }
})

</script>

<template>
    <div class="box">
        <h1>数据总览</h1>
        <div>
            <div>
                <p>咨询数</p>
                <div><span>{{number}}</span>今日</div>
                <span>共{{ total }}</span>
            </div>
            <div>
                <p>访问人数</p>
                <div><span>{{ visit }}</span>今日</div>
                <span>共{{ totalVisit }}</span>
            </div>
            <div>
                <p>咨询时长</p>
                <div><span>{{ duration }}</span>今日</div>
                <span>共{{ totalDuration }}</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.box {
    padding: 30px;

    h1 {
        margin-bottom: 30px;
        font-weight: bold;
        font-size: 18px;
    }

    > div {
        display: flex;

        > div {
            margin-right: 40px;
            padding: 15px 20px;
            width: 260px;
            height: 150px;
            border: 1px solid #BBBBBB;

            p {
                font-size: 16px;
            }

            > div {
                margin: 20px 0 15px 60px;

                span {
                    font-size: 30px;
                    font-weight: 250;
                }
            }

            span {
                font-size: 14px;
            }
        }
    }
}

</style>
